<style scoped>
.index {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}

.index h1 {
    height: 150px;
}

.index h1 img {
    height: 100%;
}

.index h2 {
    color: #666;
    margin-bottom: 60px;
}

.index h2 p {
    margin: 0 0 50px;
}

.index .ivu-row-flex {
    height: 100%;
}
</style>

<template>
<div class="index">
    <Row type="flex" justify="center" align="middle">
        <Col span="16">
        <h1>
            <img src="/static/logo/logo.png">
        </h1>
        <h2>
            <p>{{ message }}</p>
        </h2>
        <Row type="flex" justify="center" align="middle">
            <Col span="4" align="center">
            <Button type="ghost" @click="handleStart">Say Hi</Button>
            </col>
            <Col span="4" align="center">
            <Button type="info" @click="modal1 = true">登录</Button>
            </col>
            <Col span="4" align="center">
            <Button type="ghost" @click="handleVa">数据验证</Button>
            </col>
            <Col span="4" align="center">
            <router-link to="/home">路由验证</router-link>
            </col>
        </row>

        <Modal v-model="modal1" title="用户登录" :mask-closable=false>
            <Form ref="formLogin" :model="formLogin" :rules="ruleLogin" inline>
                <FormItem prop="username">
                    <Input type="text" v-model="formLogin.username" placeholder="用户名">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="formLogin.password" placeholder="******">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formLogin')">登录</Button>
                </FormItem>
            </Form>
            <div slot="footer">
            </div>
        </Modal>

        </Col>
    </Row>
</div>
</template>

<script>
import {
    tokenMgr
} from '../libs/axiosPlugin';

export default {
    methods: {
        handleStart() {
            this.message = 'Hello liuyanhui!';
        },

        handleVa() {
            this.$http.get('/api/userSer/user/get')
                .then((res) => {
                    this.$Message.info('获得返回结果：' + res.data);
                });
        },

        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //服务端请求
                    tokenMgr.getToken(this.formLogin);
                } else {
                    this.$Message.error('请正确填写信息');
                }
            });
        }

    },

    data() {
        return {
            message: 'Hello World!',
            modal1: false,
            formLogin: {
                username: localStorage.username ? localStorage.username : '',
                password: ''
            },
            ruleLogin: {
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }, {
                    type: 'string',
                    min: 1,
                    message: '密码长度不够',
                    trigger: 'blur'
                }]
            }
        };
    }
};
</script>